<template>
  <div class="container">
    <div class="query-form">
      <el-form ref="formRef" :model="queryForm" :rules="rules" inline>
        <el-form-item label="根据类型查询" prop="type">
          <el-select v-model="queryForm.type">
            <el-option label="全部" value="all"/>
            <el-option label="清洁工" value="cleaner"/>
            <el-option label="门店兼职" value="partTimeShop"/>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQueryClick">查询</el-button>
          <el-button type="primary" @click="handleExportClick">导出</el-button>
        </el-form-item>
      </el-form>
    </div>
    <el-table v-loading="isLoading" :data="payments" border>
      <el-table-column label="Staff no." prop="staffNumber"/>
      <el-table-column label="员工姓名" prop="staffName"/>
      <el-table-column label="英文姓名" prop="englishName"/>
      <el-table-column label="职位" prop="job"/>
      <el-table-column label="位置" prop="location"/>
      <el-table-column label="入职日期（For MPF）" prop="entryDate"/>
      <el-table-column label="From" prop="fromDate"/>
      <el-table-column label="To" prop="toDate"/>
      <el-table-column label="NO.OF DAYS" prop="numberOfDays"/>
      <el-table-column label="基本薪金" prop="basicPayment"/>
      <el-table-column label="工作时数1（合计）" prop="workHours"/>
      <el-table-column label="基本薪资总数" prop="totalPayment"/>
      <el-table-column label="补偿总数" prop="totalCompensation"/>
      <el-table-column label="扣减总数" prop="totalDeduction"/>
      <el-table-column label="合计" prop="total"/>
      <el-table-column label="强基金供款（雇员）" prop="employeeMPFContributions"/>
      <el-table-column label="强基金供款（雇主）" prop="employerMPFContributions"/>
      <el-table-column label="本月薪资" prop="thisMonthSalary"/>
      <el-table-column label="入账总金额" prop="totalAmountDeposited"/>
    </el-table>
  </div>
</template>
<script lang="ts" setup>
import {ref} from "vue";
import {ElForm, ElMessage, FormRules} from "element-plus";
import {utils, writeFile} from "xlsx";

const isLoading = ref(false)
const queryForm = ref<{ type: "all" | "cleaner" | "partTimeShop" }>({type: "all"})
const formRef = ref<InstanceType<typeof ElForm>>()
const rules: FormRules = {
  type: [
    {
      required: true,
      message: "请选择查询类型",
      trigger: "change"
    }
  ]
}

interface PaymentResponse {
  staffNumber?: string
  staffName?: string
  englishName?: string
  job?: string
  location?: string
  entryDate?: string
  fromDate?: string
  toDate?: string
  numberOfDays?: number
  basicPayment?: number
  workHours?: number
  totalPayment?: number
  totalCompensation?: number
  totalDeduction?: number
  total?: number
  employeeMPFContributions?: number // 强基金供款（雇员）
  employerMPFContributions?: number // 强基金供款（雇主）
  thisMonthSalary?: number
  totalAmountDeposited?: number
}

const payments = ref<PaymentResponse[]>([])

async function getData() {
  if (isLoading.value == false) {
    isLoading.value = true;
  }
  setInterval(() => {
    payments.value = [{
      staffNumber: "10001641",
      staffName: "劉桂娣",
      englishName: "LAU Kwai Tai",
      job: "兼職清潔工",
      location: "OFFICE",
      entryDate: "15/5/2023",
      fromDate: "11/1/2024",
      toDate: "11/30/2024",
      numberOfDays: 30,
      basicPayment: 80.0,
      workHours: 51.0,
      totalPayment: 4080.00,
      totalCompensation: 0.0,
      totalDeduction: 0.0,
      total: 4080.0,
      employeeMPFContributions: 0.0,
      employerMPFContributions: 204.0,
      thisMonthSalary: 4080.0,
      totalAmountDeposited: 4080.0
    }]
    isLoading.value = false
  }, 1000)
}

getData()

function handleExportClick() {
  if (payments.value.length > 0) {
    const processedData: {
      "Staff no."?: string
      "员工姓名"?: string
      "英文姓名"?: string
      "职位"?: string
      "位置"?: string
      "入职日期（For MPF）"?: string
      "From"?: string
      "To"?: string
      "No.OF DAYS"?: number
      "基本薪金"?: number
      "工作时数1（合计）"?: number
      "基本薪资总数"?: number
      "补偿总数"?: number
      "扣减总数"?: number
      "合计"?: number
      "强基金供款（雇员）"?: number
      "强基金供款（雇主）"?: number
      "本月薪资"?: number
      "入账总金额"?: number
    }[] = payments.value.map((payment: PaymentResponse) => ({
      "Staff no.": payment.staffNumber,
      "员工姓名": payment.staffName,
      "英文姓名": payment.englishName,
      "职位": payment.job,
      "位置": payment.location,
      "入职日期（For MPF）": payment.entryDate,
      "From": payment.fromDate,
      "To": payment.toDate,
      "No.OF DAYS": payment.numberOfDays,
      "基本薪金": payment.basicPayment,
      "工作时数1（合计）": payment.workHours,
      "基本薪资总数": payment.totalPayment,
      "补偿总数": payment.totalCompensation,
      "扣减总数": payment.totalDeduction,
      "合计": payment.total,
      "强基金供款（雇员）": payment.employeeMPFContributions,
      "强基金供款（雇主）": payment.employerMPFContributions,
      "本月薪资": payment.thisMonthSalary,
      "入账总金额": payment.totalAmountDeposited
    }))
    const workBook = utils.book_new()
    const workSheet = utils.json_to_sheet(processedData, {
      header: [
        "Staff no.",
        "员工姓名",
        "英文姓名",
        "职位",
        "位置",
        "入职日期（For MPF）",
        "From",
        "To",
        "No.OF DAYS",
        "基本薪金",
        "工作时数1（合计）",
        "基本薪资总数",
        "补偿总数",
        "扣减总数",
        "合计",
        "强基金供款（雇员）",
        "强基金供款（雇主）",
        "本月薪资",
        "入账总金额"
      ]
    })
    utils.book_append_sheet(workBook, workSheet)
    writeFile(workBook, "output.xlsx")
  } else {
    ElMessage.error("没有数据可以导出")
  }
}

async function handleQueryClick() {
  await getData()
}
</script>
<style lang="scss" scoped>
.container {
  background-color: white;
  padding: 20px;

  .query-form {
    .el-select {
      --el-select-width: 240px;
    }
  }
}
</style>
